<template>
  <div class="wrap">
    <MyInput :list="list">
      <template #title="RValue">自己定义的标题{{ RValue.a }}</template>
      <template #content="item">
        <span>{{ item.date }}: {{ item.work }}</span>
      </template>
    </MyInput>
    <el-divider></el-divider>
    <div class="move_box">
      <MousePosition>
        <template #mouseMove="{ x, y }">
          Mouse is at: {{ x }} {{ y }}
        </template>
      </MousePosition>
    </div>
    <el-divider></el-divider>
    <el-button @click="dialogVisiable = true">这是点击的按钮</el-button>
    <slotTemplatet :dialogVisiable.sync="dialogVisiable" :propsList="propsList">
      <template #list="{ width, height, bgc, content }">
        <div
          class="icon"
          :style="{ width: width, height: height, backgroundColor: bgc }"
        >
          <span>{{ content }}</span>
        </div>
      </template>
    </slotTemplatet>
  </div>
</template>
<script>
import MyInput from "@/components/my-input/index.vue";
import MousePosition from "@/components/mouse-position/index.vue";
import slotTemplatet from "@/components/dialog-list/index.vue";
export default {
  name: "",
  data() {
    return {
      propsList: [
        {
          id: "01",
          date: "2022-09-11",
          name: "张可",
          systemData: {
            width: "120px",
            height: "20px",
            bgc: "#FFFFD0",
            content: "我是未来1",
          },
        },
        {
          id: "02",
          date: "2022-09-11",
          name: "张可",
          systemData: {
            width: "120px",
            height: "20px",
            bgc: "#F3CCFF",
            content: "我是未来2",
          },
        },
        {
          id: "03",
          date: "2022-09-11",
          name: "张可",
          systemData: {
            width: "120px",
            height: "20px",
            bgc: "#A555EC",
            content: "我是未来3",
          },
        },
      ],
      dialogVisiable: false,
      list: [],
    };
  },
  props: [],
  created() {
    setTimeout(() => {
      this.list = [
        {
          date: "11-01",
          work: "放假",
        },
        {
          date: "11-02",
          work: "工作",
        },
        {
          date: "11-03",
          work: "过年",
        },
      ];
    }, 1000);
  },
  mounted() {},
  components: {
    MyInput,
    MousePosition,
    slotTemplatet,
  },
  computed: {},
  methods: {},
};
</script>
<style lang="less" scoped>
.wrap {
  .move_box {
    width: 400px;
    height: 400px;
    border: 1px solid skyblue;
    border-radius: 20px;
  }
}
.icon {
  display: inline-block;
  margin-left: 20px;
  cursor: pointer;
}
</style>